<template>
<!--  处理行内非替换元素的高宽问题的！-->
  <div :style="!span?'display: inline-block;':''">
<!--  span默认是undefined  -->
  <el-col v-if="span" :span="span">
    <el-form-item :label="label" :prop="prop" >
      <el-input
        v-model="data"
        :placeholder="'请输入' + label"
        @input="handleInput"
        @keyup.enter.native="handleEnter"
      />
    </el-form-item>
  </el-col>
    <el-form-item v-if="!span" :label="label" :prop="prop" >
      <el-input
        v-model="data"
        :placeholder="'请输入' + label"
        @input="handleInput"
        @keyup.enter.native="handleEnter"
      />
    </el-form-item>

  </div>
</template>

<script>
    export default {
        name: "in",
        props:{
          label: {
            type: String,
            default: '标签'
          },
          placeholder: {
            type: String,
            default: '请填入字段'
          },
          prop: {
            type: String,
            default: '请填入字段'
          },
          value: {
            type: [String,Number]
          },
          span: {
            type: Number,
            default: undefined
          },

        },
      data() {
          return {
            data: ""
          }
      },
      watch: {
          value(val) {
            this.data=val;
          }
      },
      created() {
          this.data = this.value;
      },
      methods:{
        handleInput(e){
          this.$emit("input",e)
        },
        handleEnter(e){
          this.$emit("enter",e)
        }
      }
    }
</script>

<style scoped>

</style>
